<template>
  <div class="drag-form-item cursor-move" :class="isSelected ? 'is-selected' : ''">
    <div :class="isLayout ? '' : 'pointer-events-none'">
      <slot></slot>
    </div>
    <div class="drag-form-item-operate" v-if="isSelected">
      <el-button type="warning" :size="'small'" :icon="DocumentCopy" circle @click.stop="copyControl" />
      <el-button type="danger" :size="'small'" :icon="Delete" circle @click.stop="deleteControl" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { DocumentCopy, Delete } from "@element-plus/icons-vue";

const isSelected = defineModel("isSelected", { type: Boolean, default: false });

const isLayout = defineModel("isLayout", { type: Boolean, default: false });

const emits = defineEmits(["copyControl", "deleteControl"]);
const copyControl = () => {
  emits("copyControl");
};

const deleteControl = () => {
  emits("deleteControl");
};
</script>

<style lang="scss" scoped>
.drag-form-item {
  position: relative;
  box-sizing: border-box;
  width: 100%;

  &:hover {
    background-color: #e3edf5;
  }
}

.is-selected {
  border: 1px dashed #409eff;
  background-color: #e6f4ff;
}

.drag-form-item-operate {
  position: absolute;
  top: 0px;
  right: 8px;
  z-index: 999;
}
</style>
